<template>
  <!-- This section should be hidden by default and shown when there are todos -->
      <section class="main">
        <input id="toggle-all" class="toggle-all" type="checkbox" v-model="checkAll">
        <label for="toggle-all">Mark all as complete</label>
        <ul class="todo-list">
          <!-- These are here just to show the structure of the list items -->
          <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
          <li :class="{completed:item.isDone,editing:currentId===item.id}" v-for="item in list" :key="item.id">
            <div class="view">
              <input class="toggle" type="checkbox" :checked="item.isDone" @change="changed(item.id)">
              <label @dblclick="revise(item)">{{item.name}}</label>
              <button class="destroy" @click="del(item.id)"></button>
            </div>
            <input class="edit" value="Create a TodoMVC template" v-model="currentName" @keyup.esc="esc" @keyup.enter="modify">
          </li>
          
        </ul>
      </section>
</template>

<script>
export default {
   props:{
       list:{
           type:Array,
           required:true
       },
   },
   data(){
       return {
            currentId:'',
            currentName:''
       }
   },
   methods:{
       changed(id){
           this.$emit('changedss',id)
       },
       del(id){
           this.$emit('del',id)
       },
       revise(item){
           this.currentId = item.id
           this.currentName = item.name
       },
       esc(){
           this.currentId = ''
       },
       modify(){
           if(!this.currentName) return alert('请输入任务名')
           this.$emit('modify',this.currentId,this.currentName)
           this.currentId = ''
       }
   },
   computed:{
       checkAll:{
           get(){
               return this.list.every(item=>item.isDone)
           },
           set(value){
               this.$emit('checkAll',value)
           }
       }
   }
}
</script>

<style>

</style>